<template>
  <h3>新闻头条</h3>
  <nav class="link-wrapper">
    <router-link to="/headline">头条新闻</router-link>
    <router-link to="/cation">分类新闻</router-link>
  </nav>
  <router-view/>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped lang="stylus">
  h3
    display flex
    justify-content center
    height 50px
    background-color #e03c3d
    font-size 20px
    line-height 50px
    text-align center
    align-items center
    color white
    letter-spacing 3px
    margin-top 10px
    margin-bottom 15px
  .link-wrapper
    display flex
    width 100%
    height 30px
    justify-content center
    align-items center
    color red
    a
      position relative
      box-sizing border-box
      margin 0 10px
      color #000
      //color #ff0313
      //text-decoration none
    .router-link-active::after
      position absolute
      display block
      content ''
      width 100%
      height 2px
      bottom -6px
      background-color red
    .router-link-active
      color red
</style>
